<template>
  <div id="detatil" class="wrapper p-3 " >
    <div class="d-flex">
      <div>
        <img src="~assets/image/device/box.png" width="280" height="280">
        <img src="~assets/image/device/alarm.png" width="36" height="36">
        <ul>
          <li>控制箱号：{{box.No}}</li>
          <li>责任区：{{box.AreaName}}</li>
          <li>安装地址：{{box.Location}}</li>
          <li>设备厂家：{{box.RtuManufacturer}}</li>
        </ul>
      </div>
      <el-table class="ur-table" :data="tableData" tooltip-effect="dark" height="380" :show-header="false" stripe>
        <el-table-column label="名称" prop="filed" align="center"></el-table-column>
        <el-table-column label="A相" prop="Ia" align="center">
          <template slot-scope="scope" >{{scope.row.Ia==null?'--':scope.row.Ia}}</template>
        </el-table-column>
        <el-table-column label="B相" prop="Ib" align="center">
          <template slot-scope="scope" >{{scope.row.Ib==null?'--':scope.row.Ib}}</template>
        </el-table-column>
        <el-table-column label="C相" prop="Ic" align="center">
          <template slot-scope="scope" >{{scope.row.Ic==null?'--':scope.row.Ic}}</template>
        </el-table-column>
      </el-table>
    </div>

<!--    <div class="text-center">-->
<!--      <el-button slot="append" class="ur-btn ur-btn-primary" @click="RtuRealTimeDetail" :disabled="btnState"><i class="iconfont icon-search"></i>实时查询</el-button>-->
<!--    </div>-->
  </div>
</template>

<script>
  import api from 'api/api'
  import {mapState} from 'vuex'
  import data from './data/rtuDetail.json'

  export default {
    components: {},
    props: {
      rtuId: {},
      boxImei: {},
      box:{}
    },
    data() {
      return {
        tableData: [],
      }
    },
    watch: {},
    computed: {
      ...mapState({
        btnState: state => state.user.btnState,
        limits:state=>state.user.userInfo.limits
      })
    },
    methods: {
      QueryRtuDetail() {
        // api.fetchSimple('/Monitor/QueryRtuDetail', { rtuId: this.rtuId }).then(r => {
          let res=data.data
          this.tableData = []
          this.tableData.push(
            {filed:'进线电压' ,'Ia': res.In_Ua, 'Ib': res.In_Ub, 'Ic': res.In_Uc},
            {filed:'进线电流' ,'Ia': res.In_Ia, 'Ib': res.In_Ib, 'Ic': res.In_Ic},
           )
          for (var i = 1; i<=6; i++) { //this.box.OutlineNum
            this.tableData.push({filed:'出线K'+i+'' , 'Ia': res['Out_Ia'+i], 'Ib': res['Out_Ib'+i], 'Ic': res['Out_Ic'+i] })
          }
        // })
      },
      RtuRealTimeDetail() {
        let self = this;
        this.$store.commit('user/SET_USER_PWD', '')
        this.$store.commit('user/SET_BTN_STATE',true)
        api.fetchSimple('/Communication/Rtu/RtuRealTimeDetail', {boxDevAddr: this.boxImei}).then(r => {
          this.$store.commit('user/SET_BTN_STATE',false)
          if (r != '') {
            this.$message.success({showClose:true,message:'召测成功'})
            let res = r.data
            this.tableData = []
            this.tableData2 = []
            self.tableData.push(
              {filed: '进线电压', 'Ia': res.In_Ua, 'Ib': res.In_Ub, 'Ic': res.In_Uc},
              {filed: '进线电流', 'Ia': res.In_Ia, 'Ib': res.In_Ib, 'Ic': res.In_Ic},
              {filed: '出线电压', 'Ia': res.Out_Ua, 'Ib': res.Out_Ub, 'Ic': res.Out_Uc},
            )
            for (var i = 1; i <= self.box.OutlineNum; i++) {
              self.tableData2.push({In_P:res.In_P,In_Q:res.In_Q,In_Cos:res.In_Cos})
              self.tableData.push({filed: '出线' + i + '电流', 'Ia': res['Out_Ia' + i], 'Ib': res['Out_Ib' + i], 'Ic': res['Out_Ic' + i]})
            }
          }
        })
      }
    },
    created() {
      this.QueryRtuDetail()
    },
    mounted() {
    }
  }
</script>
<style  lang="stylus" rel="stylesheet/stylus">
  #detatil .el-table td{background: transparent ;}
  #detatil .el-table tr:nth-child(even) td{background: rgba(5,18,57,0.3);}
</style>
